<!--
author:        leishanfeng <1628316216@qq.com>
date:          2023-07-09 01:04:05
component:     index
Copyright © YourCompanyName All rights reserved
-->
<template>
  <div class="dialogBox">
    <el-dialog
      node-key="value"
      title="选择人员"
      :visible="dialogVisible"
      append-to-body
      :before-close="handleClose"
      :check-on-click-node="true"
      :check-strictly="true"
    >
      <div class="dialogBox-box">
        <div class="dialogBox-box-left">
          <div class="title">选择部门</div>
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"  prefix-icon="el-icon-search" style="line-height:32px;">
          </el-input>
          <div class="treeBox">
            <el-tree
            highlight-current
            node-key="id"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
          >
          </el-tree>
          </div>
        </div>
        <div class="dialogBox-box-right"> <div class="title">选择部门</div>
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"  prefix-icon="el-icon-search" style="line-height:32px;">
          </el-input>
          <div class="treeBox">
            <el-tree
            highlight-current
            node-key="id"
            class="filter-tree"
            :data="renyaundata"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="renyuanHandleNodeClick"
          >
          </el-tree>
          </div></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible"
          style="
            background: #1d5a8f;
            border-radius: 4px;
            border: 1px solid #7cadd8;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 0.9);
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="dialogVisible"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
   
     newdialogVisible: {
        type: Boolean,
        default: false
      }
  },
  data(){
    return{
      dialogVisible:this.newdialogVisible,
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    renyuanfilterText(val) {
      this.$refs.newtree.filter(val)
    },
    newdialogVisible(val) {
      console.log(val)
      this.dialogVisible =val
    }
  },

  methods: {
    handleClose(){
       this.dialogVisible=false
      console.log(12234,this.dialogVisible)
      this.$forceUpdate();
    
    },
    dialogVisible() {
      this.dialogVisible= !this.dialogVisible
    },
    filterNode(value, data) {
      console.log(data)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      console.log(data)
    },
    renyuanHandleNodeClick(data){
       console.log(data)
    }
  },

  data() {
    return {
      filterText: '',
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      renyaundata: [
        {
          id: 1,
          label: '一级 1',
          children: [
          
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
           
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>
<style lang="scss">
.dialogBox-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 474px;
}
.dialogBox-box-left {
  width: 50%;
}
.dialogBox-box-right {
  width: 50%;
}
.treeBox{
  height: 406px;
  overflow: auto;
}
.title{
  color:#fff;
}
.el-tree {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
}
// 重置dialog样式
.el-dialog {
  background: transparent;
  //   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  //   border-radius: 4px;

  .el-dialog__header {
    background: rgba(6, 50, 88, 0.9);
    padding: 20px 0 0 20px;
    height: 24px;
    line-height: 24px;
  }

  .el-dialog__title {
    // color: #313335;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
  }

  .el-dialog__headerbtn {
    top: 20px;
    right: 20px;
    height: 14px;
    line-height: 14px;

    .el-dialog__close {
      // color: #354052;
      color: #4af6fc;
      width: 14px;
      height: 14px;
    }
  }

  .el-dialog__body {
    width: calc(100% - 40px);
    padding: 30px 20px 20px;
    // font-size: 0.16px;
    font-size: 0.18px;
    color: #313335;
    background: rgba(6, 50, 88, 0.9);
  }
  .el-dialog__footer {
    background: rgba(6, 50, 88, 0.9) !important;
  }
}
.el-tree-node:focus > .el-tree-node__content {
  background: rgba(74, 246, 252, 0.1);
  box-shadow: inset 0px 0px 10px 0px #4af6fc;
}
.el-tree-node__content:hover {
  background: rgba(74, 246, 252, 0.1);
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: rgba(74, 246, 252, 0.1);
  box-shadow: inset 0px 0px 10px 0px #4af6fc;
}
</style>
